<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="今日浏览"
      right-text="清空"
      @click-left="back"
      @click-right="clear"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="content">
      <van-tabs v-model="active" color="#45b7cb">
        <van-tab name="1" title="租房">
          <div
            v-for="item in houselist"
            v-show="houselist.length != 0"
            :key="item.index"
            class="house"
            @click="jumptodetail(item.roomId, item)"
          >
            <van-image
              width="121px"
              height="112px"
              lazy-load
              :src="item.image"
              fit="cover"
              radius="5px"
            />
            <div class="intrduce">
              <span class="title1">{{ item.subdistrict }}</span>
              <span class="title2"
                ><span>{{ item.rentalWay }}</span
                >|<span>{{ item.houseType }}</span
                >|<span>{{ item.roomAcre }}</span
                >|<span>{{ item.floor }}</span></span
              >
              <span v-show="item.distance" class="title2"
                ><van-icon name="location" />{{ item.distance }}</span
              >
              <div class="tips">
                <span>{{ item.rentalWay }}</span>
                <span>{{ item.paymentMethod }}</span>
                <span>{{ item.houseType }}</span>
              </div>
              <span class="title3">{{ item.price }}</span>
            </div>
          </div>
          <div v-show="houselist.length == 0" class="nohouse">
            <img src="../../assets/nohouse.png" alt="" />
            <div>暂无浏览记录</div>
          </div>
        </van-tab>
        <van-tab name="2" title="二手房">
          <div
            v-for="(item, index) in buyhouselist"
            v-show="buyhouselist.length != 0"
            :key="index"
            class="house2"
            @click="jumptobuydetail(item.houseId, item)"
          >
            <van-image
              width="121px"
              height="112px"
              lazy-load
              :src="item.houseImage"
              fit="cover"
              radius="5px"
            />
            <div class="intrduce">
              <div class="title1">{{ item.subdistrict }}</div>
              <div class="title2">
                <span>{{ item.houseType }}</span
                >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                >|<span>{{ item.floor }}</span>
              </div>
              <div class="tips">
                <span v-show="item.aspectType">{{ item.aspectType }}</span>
                <span v-show="item.decoration">{{ item.decoration }}</span>
                <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
              </div>
              <div v-show="item.listedPrice != '面议'" class="title3">
                {{ item.listedPrice }}万<span>
                  <span
                    >{{
                      ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                    }} </span
                  >元/m<span class="up">2</span></span
                >
              </div>
              <div v-show="item.listedPrice == '面议'" class="title3">
                {{ item.listedPrice }}
              </div>
            </div>
          </div>
          <div v-show="buyhouselist.length == 0" class="nohouse">
            <img src="../../assets/nohouse.png" alt="" />
            <div>暂无浏览记录</div>
          </div>
        </van-tab>
        <van-tab name="3" title="新房">
          <div
            v-for="item in newhouselist"
            :key="item.index"
            class="house"
            @click="jumptonewdetail(item.houseId, item)"
          >
            <van-image
              width="121px"
              height="112px"
              lazy-load
              :src="item.image"
              fit="cover"
              radius="5px"
            />
            <div class="intrduce">
              <span class="title1">{{ item.subdistrict }}</span>
              <span class="title2">
                <span>年限:{{ item.propertyTerm }}</span>
                <span v-show="item.plotRatio">容积率:{{ item.plotRatio }}</span>
                <span v-show="item.greeningRate"
                  >绿化率:{{ item.greeningRate }}</span
                >
              </span>
              <span class="tips">
                <span v-for="i in item.houseLabel" :key="i.index">{{ i }}</span>
              </span>
              <span v-show="item.sellingPrice != '0元/m²'" class="title3">{{
                item.sellingPrice
              }}</span>
              <span v-show="item.sellingPrice == '0元/m²'" class="title3"
                >待定</span
              >
            </div>
          </div>
          <div v-show="newhouselist.length == '0'" class="nohouse">
            <img src="../../assets/nohouse.png" alt="" />
            <div>暂无浏览记录</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  getHouseList,
  setHouseList,
  getHouseListBuy,
  setHouseListBuy,
  getHouseListNew,
  setHouseListNew,
} from "@/utils/auth";
export default {
  data() {
    return {
      active: "1",
      houselist: [],
      buyhouselist: [],
      newhouselist: [],
    };
  },
  created() {
    this.houselist = getHouseList();
    this.buyhouselist = getHouseListBuy();
    this.newhouselist = getHouseListNew();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    clear() {
      this.$dialog
        .confirm({
          message: "是否确认清空浏览记录",
          messageAlign: "left",
        })
        .then(() => {
          setHouseList([]);
          setHouseListBuy([]);
          setHouseListNew([]);
          this.houselist = [];
          this.buyhouselist = [];
          this.newhouselist = [];
        })
        .catch(() => {});
    },
    jumptodetail(e, item) {
      const list = getHouseList();
      for (let i = 0; i < list.length; i++) {
        if (list[i].roomId === item.roomId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseList(list);
      this.$router.push({ path: "/housedetail", query: { roomId: e } });
    },
    jumptobuydetail(e, item) {
      const list = getHouseListBuy();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListBuy(list);
      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    jumptonewdetail(e, item) {
      const list = getHouseListNew();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListNew(list);
      this.$router.push({ path: "/newhousedetail", query: { newHouseId: e } });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .house {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          border: 1px solid #45b7cb;
          color: #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          font-size: 12px;
          margin-left: 3px;
        }
      }
    }
  }
  .house2 {
    background-color: #fff;
    margin: 0 15px;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      width: 190px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          border: 1px solid #45b7cb;
          color: #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          color: #999;
          font-size: 12px;
          margin-left: 6px;
        }
      }
    }
    .up {
      margin: 0px !important;
      font-size: 12px;
      vertical-align: super;
      transform: scale(calc(10 / 12));
    }
  }
  .house3 {
    background-color: #fff;
    margin: 0 15px;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      width: 190px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips1 {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 1px 2px;
          border: 1px solid #45b7cb;
          color: #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 18px;
        font-weight: bold;
        span {
          color: #999;
          font-size: 12px;
          margin-left: 3px;
        }
      }
    }
  }
  .nohouse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 150px;
    }
    div {
      margin-top: 10px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
  }
}
</style>
